<template>
  <ElDropdown
    ref="elDropdownMenuRef"
    class="v-context-menu"
    :trigger="trigger"
    placement="bottom-start"
    @command="command"
    @visible-change="visibleChange"
    popper-class="v-context-menu-popper"
  >
    <slot></slot>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem
          v-for="(item, index) in schema"
          :key="`dropdown${index}`"
          :divided="item.divided"
          :disabled="item.disabled"
          :command="item"
        >
          {{ item.label }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<script setup>
import { ref, toRefs } from "vue";
const props = defineProps({
  schema: {
    type: Array,
    default: () => [],
  },
  trigger: {
    type: String,
    default: "contextmenu",
  },
  tagItem: {
    type: Object,
    default: () => ({}),
  },
});
const { schema, trigger, tagItem } = toRefs(props);
const emit = defineEmits(["visibleChange"]);
const command = (item) => {
  item.command && item.command(item);
};

const visibleChange = (visible) => {
  emit("visibleChange", visible, tagItem.value);
};
const elDropdownMenuRef = ref(null);
defineExpose({
  elDropdownMenuRef,
  tagItem: tagItem.value,
});
</script>

<style lang="scss" scoped></style>
